<template>
  <div class="currency_page">
    <CommonHeader title="计价货币" />
    <div class="currency_content page_no_tab_bar">
      <div class="cur_desc font_color">设置法币交易币种</div>
      <div class="cur_search">
        <img src="@/assets/profile/settings/search_icon.png" alt="">
        <input type="text" placeholder="搜索">
      </div>
      <!-- 货币列表 -->
      <div class="cur_tit">货币列表</div>
      <ul class="currency_list">
        <li v-for="(item,index) in 10" :key="index">
          <img src="@/assets/profile/settings/BTC_icon.png" alt="">
          <div class="desc">
            <div>BTC{{ item }}</div>
            <div class="font_color">BTC</div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import CommonHeader from "@/components/CommonHeader.vue";
</script>

<style lang="scss" scoped>
.currency_page {
  .currency_content {
    padding-top: 10px;
    .font_color {
      font-size: 14px;
    }
    .cur_desc {
      margin: 10px 0;
    }
    .cur_search {
      background-color: #141515;
      padding: 10px;
      border-radius: 20px;
      display: flex;
      align-items: center;
      input {
        background-color: #141515;
        flex: 1;
        margin-left: 10px;
        color: #babcbf;
      }
    }
    .cur_tit {
      margin-top: 20px;
    }
    .currency_list {
      li {
        display: flex;
        align-items: center;
        padding: 10px 0;
        .desc {
          margin-left: 10px;
        }
      }
    }
  }
}
</style>
